<template>
  <div class="noData">
    <P>
      <span :class="data.tipsText ? 'tips' : ''">{{this.data.tipsText}}</span>
    </P>
    <img src="@/assets/images/nodataBg.png"
         class="bg"
         alt="">
    <div>
      <p :class="data.text1 ? 'text1' : ''">{{this.data.text1}}</p>
      <p :class="data.text2 ? 'text2' : ''">{{this.data.text2}}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "noData",
  props: ['data']
}
</script>
<style lang="stylus" scoped>
.bg
  width 30%
  margin-top 0.5rem
.noData
  text-align center
  padding-top 0.5rem
.tips
  color white
  font-size $font-h4
  background $border-color
  padding 0 0.1rem
  border-radius 2px
  margin 0.5rem 0
.text1
  color $text-main
  font-size $font-h2
  margin-bottom 0.2rem
.text2
  font-size $font-h3
  color $border-color
</style>
